<template>
  <div class="home">
    <div class="banner">
      <div class="wrap">
        <div class="text">
          <div class="title">数字化解决方案</div>
          <div class="title">让成长再次发生</div>
          <div class="subtitle">悦荟数字，提效增收数字化平台</div>
        </div>
        <div class="img">
          <img src="@/assets/images/banner.png" class="banner-img">
        </div>
      </div>
    </div>
    <div class="product">
      <div class="wrap">
        <div class="article-title">我们的产品</div>
        <div class="article-subtitle">秉承客户成功的经营理念，致力于成为不动产生态链数字化值得信赖的伙伴</div>
        <div class="content">
          <div v-for="item in product" :key="item.id" :class="'item' + ' p'+item.id">
            <div class="con">
              <div class="img">
                <img :src="item.img" />
              </div>
              <div class="text">
                <div class="title">{{ item.title }}</div>
                <div class="subtitle">{{ item.subtitle }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="case">
      <div class="wrap">
        <div class="article-title">精品案例展示</div>
        <div class="article-subtitle">秉承“深耕数字科技，助力产业升级“的企业使命，坚持助力客户成功的经营理念，累计为7000多家不动产开发运营企业提供了数字化解决方案和产品</div>
        <div class="con">
          <swiper class="swiper" :options="swiperOption">
            <swiper-slide>Slide 1</swiper-slide>
            <swiper-slide>Slide 2</swiper-slide>
            <swiper-slide>Slide 3</swiper-slide>
            <swiper-slide>Slide 4</swiper-slide>
            <swiper-slide>Slide 5</swiper-slide>
            <swiper-slide>Slide 6</swiper-slide>
            <swiper-slide>Slide 7</swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide} from 'vue-awesome-swiper'
import "swiper/css"
import "swiper/css/pagination"
export default {
  name: 'HomeView',
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      product: [
        {id: 1, title: "商业模式", img: require('@/assets/images/p1.png'), subtitle: "打造全渠道生态私域的精准营销体系，转化顾客资产系统管理，实现C 、B端双轮驱动"},
        {id: 2, title: "裂变系统", img: require('@/assets/images/p2.png'), subtitle: "100+营销工具，赋能企业加速构建《私域生态》提供全链路自动裂变增长系统"},
        {id: 3, title: "员工增效", img: require('@/assets/images/p3.png'), subtitle: "打造好分佣模式，解决员工动销机制问题"},
        {id: 4, title: "私域运营", img: require('@/assets/images/p4.png'), subtitle: "私域运营系统-打通人、货、场,构建引流获客、客户管理、运营转化营销闭环.全面助力业绩增长,客户营销精准触达,一站式私域流量增长平台"},
        {id: 5, title: "IP运营", img: require('@/assets/images/p5.png'), subtitle: "以创意为手法，以产品为载体，结合场景应用，打造数字化品牌IP"},
        {id: 6, title: "生态系统", img: require('@/assets/images/p6.png'), subtitle: "一站式生态服务，智能化系统，自主管理商品及渠道并实现资源的自动整合与共享"},
      ],
      swiperOption: {
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows : true
        },
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.banner {
  height: 790px;
  background: url(../assets/images/banner-bg.png) center;
  .wrap {
    display: flex;
    justify-content: space-between;
    .text {
      margin-top: 200px;
      .title {
        font-size: 50px;
        animation: bannerAtext1 2s;
      }
      .subtitle {
        font-size: 30px;
        color: #2C5599;
        animation: bannerAtext2 2s;
      }
    }
  }
  .banner-img {
    animation: bannerA 2s infinite;
  }
}
.product {
  background-color: #EAF5FF;
  overflow: hidden;
  .content {
    width: 1027px;
    height: 760px;
    background: url(../assets/images/product-bg.png);
    margin: 180px auto 80px;
    position: relative;
    clear: both;
    .item {
      position: absolute;
      .title {
        font-size: 24px
      }
      .subtitle {
        font-size: 16px;
        color: #868C90;
      }
      &:hover {
        .img img {
          animation: productA 4s infinite;
        }
      }
    }
    .p1{
      width: 360px;
      left: 290px;
      top: -110px;
      .con {
        display: flex;
        .text {
          margin-top: 50px;
          margin-left: 20px;
        }
      }
    }
    .p2{
      width: 225px;
      left: 841px;
      top: -35px;
      .con {
        .text {
          margin-left: 20px;
        }
      }
    }
    .p3{
      width: 225px;
      left: 939px;
      top: 175px;
      .con {
        .text {
          margin-left: -20px;
        }
      }
    }
    .p4{
      width: 300px;
      left: 340px;
      top: 380px;
      .con {
        .text {
          margin-left: 20px;
        }
      }
    }
    .p5{
      width: 240px;
      left: 75px;
      top: 44px;
      .con {
        .text {
          margin-left: 20px;
        }
      }
    }
    .p6{
      width: 300px;
      left: 375px;
      top: 44px;
      .con {
        .text {
          margin-left: 20px;
        }
      }
    }
  }
}
.case {
  padding: 50px 0;
  .con {
    height: 400px;
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .swiper {
    height: 100%;
    width: 100%;

    .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300px;
      height: 300px;
      text-align: center;
      font-weight: bold;
      font-size: 16px;
      background-color: #2C8DFB;
      background-position: center;
      background-size: cover;
      color: #ffffff;
    }

    .swiper-pagination {
      /deep/ .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background-color: #ffffff;
      }
    }
  }
}
.article-title {
  font-size: 32px;
  text-align: center;
}
.article-subtitle {
  font-size: 16px;
  color: #868C90;
  text-align: center;
}
@keyframes bannerA {
  0% {
    margin-top: 0px;
  }
  50% {
    margin-top: 30px;
  }
  100% {
    margin-top: 0px;
  }
}
@keyframes bannerAtext1 {
  0%{
    opacity: 0;
    transform: translateX(-50px)
  }
  100%{
    opacity: 1;
    transform: translateX(0px)
  }
}
@keyframes bannerAtext2 {
  0%{
    opacity: 0;
    transform: translateX(50px)
  }
  100%{
    opacity: 1;
    transform: translateX(0px)
  }
}
@keyframes productA {
  0% {
    transform: rotateY(0deg)
  }
  50% {
    transform: rotateY(360deg)
  }
  100% {
    transform: rotateY(0deg)
  }
}
@media screen and (min-width: 1200px) {
  .wrap {
    width: 1200px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 1200px) {
  .wrap {
    width: 100%;
  }
}
</style>